<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      preserveAspectRatio="none meet"
      viewBox="0 0 81.441 73.063"
    >
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="0.06"
          y1="0.5"
          x2="0.939"
          y2="0.5"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" />
          <stop offset="1" :stop-color="states.color" stop-opacity="0" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-2"
          x1="0.862"
          x2="0.159"
          xlink:href="#linear-gradient"
        />
      </defs>
      <g id="装饰4" transform="translate(-648.783 -243.969)">
        <path
          id="减去_11"
          data-name="减去 11"
          d="M19914,22671h-23v-65h23v2h-21v61h21v2Z"
          transform="translate(-19234 -22358)"
          :fill="states.color"
        />
        <path
          id="减去_12"
          data-name="减去 12"
          d="M23,0H0V65H23V63H2V2H23V0Z"
          transform="translate(722.004 313.002) rotate(180)"
          :fill="states.color"
        />
        <circle
          id="椭圆_33"
          data-name="椭圆 33"
          cx="3.5"
          cy="3.5"
          r="3.5"
          transform="translate(686 277)"
          :fill="states.color"
        />
        <g
          id="椭圆_34"
          data-name="椭圆 34"
          transform="translate(681 272)"
          fill="none"
          :stroke="states.color"
          stroke-width="2"
        >
          <circle cx="8.5" cy="8.5" r="8.5" stroke="none" />
          <circle cx="8.5" cy="8.5" r="7.5" fill="none" />
        </g>
        <path
          id="路径_1190"
          data-name="路径 1190"
          d="M-19288.533-22317.5l16,1h0l-16,1Z"
          transform="translate(19988.531 22596.984)"
          fill="url(#linear-gradient)"
        />
        <path
          id="路径_1190-2"
          data-name="路径 1190"
          d="M-19272.533-22317.5l-16,1h0l16,1Z"
          transform="translate(19951.535 22596.984)"
          fill="url(#linear-gradient-2)"
        />
        <path
          id="路径_1190-3"
          data-name="路径 1190"
          d="M-19272.533-22317.5l-16,1h0l16,1Z"
          transform="translate(-21627 19542.018) rotate(90)"
          fill="url(#linear-gradient-2)"
        />
        <path
          id="路径_1190-4"
          data-name="路径 1190"
          d="M16,2,0,1H0L16,0Z"
          transform="translate(688.502 307.516) rotate(-90)"
          fill="url(#linear-gradient-2)"
        />
        <rect
          id="矩形备份_18"
          data-name="矩形备份 18"
          width="4"
          height="12.441"
          rx="1"
          transform="translate(683.281 250.969) rotate(-90)"
          :fill="states.color2"
          opacity="0.6"
        />
        <rect
          id="矩形备份_18-2"
          data-name="矩形备份 18"
          width="4"
          height="12.441"
          rx="1"
          transform="translate(714.783 282.502) rotate(-90)"
          :fill="states.color2"
          opacity="0.6"
        />
        <rect
          id="矩形备份_18-3"
          data-name="矩形备份 18"
          width="4"
          height="12.441"
          rx="1"
          transform="translate(651.783 282.502) rotate(-90)"
          :fill="states.color2"
          opacity="0.6"
        />
        <rect
          id="矩形备份_18-4"
          data-name="矩形备份 18"
          width="2.039"
          height="6"
          rx="1"
          transform="translate(686.5 250.039) rotate(-90)"
          :fill="states.color2"
        />
        <rect
          id="矩形备份_18-5"
          data-name="矩形备份 18"
          width="2.039"
          height="6"
          rx="1"
          transform="translate(718.002 281.572) rotate(-90)"
          :fill="states.color2"
        />
        <rect
          id="矩形备份_18-6"
          data-name="矩形备份 18"
          width="2.039"
          height="6"
          rx="1"
          transform="translate(655.002 281.572) rotate(-90)"
          :fill="states.color2"
        />
        <rect
          id="矩形备份_18-7"
          data-name="矩形备份 18"
          width="2.039"
          height="6"
          rx="1"
          transform="translate(686.5 313) rotate(-90)"
          :fill="states.color2"
        />
        <rect
          id="矩形备份_18-8"
          data-name="矩形备份 18"
          width="4"
          height="12.441"
          rx="1"
          transform="translate(683.281 314.031) rotate(-90)"
          :fill="states.color2"
          opacity="0.6"
        />
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
</script>

<style scoped lang="scss"></style>
